<template>
  <div>
    <el-button
      type="primary"
      style="float: left; position: fixed; left: 0; bottom: 0"
      :disabled="current == 1 ? true : false"
      @click="back"
    >
      上一页
    </el-button>
    <el-card style="float: left; position: fixed; right: 0">
      <el-checkbox-group
        size="small"
        v-model="labelIDs"
        @change="selectByLabel"
      >
        <el-checkbox
          style="
            display: block;
            margin-top: 5px;
            width: 100px;
            margin-left: 10px;
          "
          v-for="label in labelList"
          :label="label.lableId"
          :key="label.lableId"
          border
          >{{ label.lableName }}</el-checkbox
        >
      </el-checkbox-group>
    </el-card>

    <el-card style="float: left; position: fixed; right: 0; margin-top: 200px">
      <el-checkbox-group
        size="small"
        v-model="locationIDs"
        @change="selectByLocation"
      >
        <el-checkbox
          style="display: block;
            margin-top: 5px;
            width: 100px;
            margin-left: 10px;
          "
          v-for="location in locationList"
          :label="location.locationId"
          :key="location.locationId"
          border
          >{{ location.locationName }}</el-checkbox
        >
      </el-checkbox-group>
    </el-card>
    <el-button
      type="primary"
      style="float: right; position: fixed; right: 0; bottom: 0"
      :disabled="current == Math.ceil(this.total / this.limit) ? true : false"
      @click="next"
    >
      下一页
    </el-button>
    <div class="home">
      <el-card class="box-card">
        <div class="clearfix">
          <span>帖子列表</span>
        </div>
      </el-card>
      <div style="margin-top: 5px">
        <el-card
          class="box-card infinite-list"
          style="margin-top: 5px; overflow: auto"
          v-for="(item, index) in cameraWorkList"
          :key="index"
        >
          <div class="clearfix" slot="header">
            <span>{{ item.header }}</span>
            <el-tag style="margin-left: 5px">{{
              item.locationLable.lableName
            }}</el-tag>
            <el-tag style="margin-left: 5px">{{
              item.cameraLocation.locationName
            }}</el-tag>
            <div style="float: right">
              <el-button
                v-if="isAll[index]"
                size="small"
                @click="showOrHide(index)"
                >收起</el-button
              >
              <el-button v-else size="small" @click="showOrHide(index)"
                >展开</el-button
              >
            </div>
          </div>
          <div class="text item">
            <div style="display: flex; align-items: center;cursor: pointer;" @click="goSpace(item.user.userId)">
              <el-avatar :src="item.user.avatar"></el-avatar>
              <span style="margin-left: 5px; font-weight: bold;">{{
                item.user.nickname
              }}</span>
            </div>
            <div>
              <el-row :gutter="20">
                <el-col :span="2">
                  <span>&nbsp;</span>
                </el-col>
                <el-col :span="18">
                  <p v-if="isAll[index]" v-html="item.content"></p>
                  <p v-else class="text-clamp" v-html="item.content"></p
                ></el-col>
              </el-row>
            </div>
          </div>
          <el-divider></el-divider>
          <el-row :gutter="24">
            <el-col :span="12" class="good_collect">
              <el-image
                @click="setIsGood(index, item.workId)"
                v-if="!isGood[index]"
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_bad.png')"
              ></el-image>
              <el-image
                @click="setIsGood(index, item.workId)"
                v-else
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_good.png')"
              ></el-image>
              <span v-if="!isGood[index]" style="margin-left: 10px">点赞</span>
              <span v-else style="margin-left: 10px"> {{ item.goodNum }} </span>
            </el-col>
            <el-col :span="12" class="good_collect">
              <el-image
                @click="setIsCollect(index, item.workId)"
                v-if="!isCollect[index]"
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_bad_collect.png')"
              ></el-image>
              <el-image
                @click="setIsCollect(index, item.workId)"
                v-else
                style="width: 30px; height: 30px"
                :src="require('../assets/ali/status_good_collect.png')"
              ></el-image>
              <span v-if="!isCollect[index]" style="margin-left: 10px"
                >收藏</span
              >
              <span v-else style="margin-left: 10px">{{
                item.collectNum
              }}</span>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script>
import work from "@/api/work";
import label from "@/api/label";
import location from "@/api/location";
import store from "@/store";
// @ is an alias to /src
export default {
  data() {
    return {
      cameraWorkList: [],
      userId: "",
      isAll: [],
      cameraWork: {},
      isGood: [],
      isCollect: [],
      labelIDs: [],
      locationIDs: [],
      labelList: [],
      locationList: [],
      allList: [],
      formLabelWidth: "120px",
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0, //总记录数,
      bad: "@/assets/ali/status_bad.png",
      good: "@/assets/ali/status_good.png",
      bad_collect: "@/assets/ali/status_bad_collect.png",
      good_collect: "@/assets/ali/status_good_collect.png",
    };
  },

  created() {
    this.getWorkPage();
    this.getLabelList();
    this.getLocationList();
    this.userId = this.$store.state.user.userId;
  },
  mounted() {
    window.addEventListener("scroll", this.load);
  },

  methods: {
    getWorkPage() {
      // this.current = current;
      this.allList[0] = this.labelIDs;
      this.allList[1] = this.locationIDs;
      work
        .getWorkPageVo(
          this.current,
          this.limit,
          0,
          this.$store.state.user.userId,
          this.allList
        )
        .then((res) => {
          if (res.success) {
            this.cameraWorkList = res.data.workList;
            this.total = res.data.total;
            this.isCollect = res.data.collectIds;
            this.isGood = res.data.goodIds;
            this.init();
          }
        });
    },
    getLabelList() {
      label.getAllLable().then((res) => {
        this.labelList = res.data.lableList;
      });
    },
    getLocationList() {
      location.getAllLocation().then((res) => {
        this.locationList = res.data.locationList;
      });
    },
    init() {
      for (let i = 0; i < this.cameraWorkList.length; i++) {
        this.isAll[i] = false;
      }
    },
    selectByLabel() {
      this.getWorkPage();
    },
    selectByLocation() {
      this.getWorkPage();
    },
    showOrHide(index) {
      this.$set(this.isAll, index, !this.isAll[index]);
    },
    goSpace(id) {
      this.$router.push({path: '/space', query: {id: id}});
    },
    setIsGood(index, workId) {
      if (this.$store.state.user.userId !== 0) {
        if (!this.isGood[index]) {
          work.goodAdd(workId, this.userId).then((res) => {
            if (res.success) {
              this.getWorkPage();
              store.commit("setGoodNumAdd");
              this.$set(this.isGood, index, !this.isGood[index]);
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        } else {
          work.goodSubtract(workId, this.userId).then((res) => {
            if (res.success) {
              this.getWorkPage();
              store.commit("setGoodNumSubtract");
              this.$set(this.isGood, index, !this.isGood[index]);
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push({ path: "/login" });
      }
    },
    setIsCollect(index, workId) {
      if (this.$store.state.user.userId !== 0) {
        if (!this.isCollect[index]) {
          work.collectAdd(workId, this.userId).then((res) => {
            if (res.success) {
              this.getWorkPage();
              store.commit("setCollectNumAdd");
              this.$set(this.isCollect, index, !this.isCollect[index]);
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        } else {
          work.collectSubtract(workId, this.userId).then((res) => {
            if (res.success) {
              this.getWorkPage();
              store.commit("setCollectNumSubtract");
              this.$set(this.isCollect, index, !this.isCollect[index]);
            } else {
              this.$message({
                message: "请出错了，稍后再试",
                type: "error",
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请先登录",
          type: "info",
        });
        this.$router.push({ path: "/login" });
      }
    },
    next() {
      this.current += 1;
      this.getWorkPage(this.current);
    },
    back() {
      this.current -= 1;
      this.getWorkPage(this.current);
    },
  },
};
</script>

<style scoped>
.good_collect {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.post {
  height: 15px;
}

el-avatar {
  vertical-align: middle;
}
.home {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 5%;
  /* margin-bottom: 5%; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
